<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi">
        <link rel="stylesheet" href="../css/m.style.css" />
        <link rel="stylesheet" href="../css/jqmEdit.css" />
        <link rel="stylesheet" type="text/css" href="../css/common.css" />
        <link rel="stylesheet" type="text/css" href="write.css" />
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <title>OAASYS2.0-MOBILE</title>
    </head>
    <script type="text/javascript" charset="utf-8">
        $(function() {
            $('.inputBoxArea').find('label').click(function() {
                switch($(this).parent().find('input').attr('type')) {
                    case 'radio' :
                        if ($('input:radio').is('input:checked')) {
                            $(this).parent().find('label').children('.checkbox_bg').removeClass('checkOn');
                        }
                        $(this).children().first().toggleClass('checkOn');
                        break;
                    case 'checkbox' :
                        $(this).children().first().toggleClass('checkOn');
                        break;
                }
            });

            var $sc = $('#select-category');
            $sc.change(function() {
                $(this).siblings('input').val($sc.val());
                $(this).siblings('label').hide();
            })
            labelctrl($('#subject'));
            labelctrl($('#content'));
            labelctrl($('#tag'));
        });
        function labelctrl(id) {
            id.on('click focus', function() {
                $(this).siblings('label').hide()
            });
            id.on('blur', function() {
                $this = $(this)
                if ($.trim($this.val()).length === 0) {
                    $this.siblings('label').show()
                }
            });
        }
    </script>
    <body>
        <div class="write oTalk" data-role="page">
            <div class="header black" data-role="header" data-position="fixed">
                <a href="javascript:void(0);" class="btn btn_dark btn_left" data-role="none"><span class="btnText">취소</span></a>
                <h1><span class="headText">글쓰기</span></h1>
                <a href="javascript:void(0);" class="btn btn_dark btn_right" data-role="none"><span class="btnText">확인</span></a>
            </div>
            <div class="container" data-role="content">
                <div class="top">
                    <div class="tabMenu">
                        <ul class="tabGrey tab3">
                            <li class="tabList tabOn">
                                <a href="javascript:void(0);" class="tabText"><img src="img/icon_tab_otalk.gif" alt="" />오톡</a>
                            </li>
                            <li class="tabList">
                                <a href="javascript:void(0);" class="tabText"><img src="img/icon_tab_real.gif" alt="" />리얼지식</a>
                            </li>
                            <li class="tabList">
                                <a href="javascript:void(0);" class="tabText">직장인SOS</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="center">
                    <div class="inputWrap">
                        <div class="inputArea">
                            <form>
                                <dl>
                                    <dt>
                                        제목
                                    </dt>
                                    <dd style="display:none;">
                                        <label for="subject"><strong>SOS</strong> : 제목을 입력해주세요.</label>
                                        <input type="text" id="subject" class="inputText" value="">
                                    </dd>
                                    <dt>
                                        글쓰기
                                    </dt>
                                    <dd>
                                        <label for="content"><strong>오톡</strong> : 일상이나 생각, 자유로운 이야기를 전해주세요.</label>
                                        <textarea type="text" id="content" class="inputText" value=""></textarea>
                                    </dd>
                                    <dt>
                                        분류
                                    </dt>
                                    <dd style="display:none;">
                                        <label for="select-category"><strong>분류</strong>를 선택해 주세요.</label>
                                        <input type="text" id="category" class="inputText" value="" readonly="readonly">
                                        <select name="category" id="select-category" data-role="none">
                                            <option value="분류1">분류1</option>
                                            <option value="분류2">분류2</option>
                                            <option value="분류3">분류3</option>
                                            <option value="분류4">분류4</option>
                                            <option value="분류5">분류5</option>
                                            <option value="분류6">분류6</option>
                                            <option value="분류7">분류7</option>
                                            <option value="분류8">분류8</option>
                                            <option value="분류9">분류9</option>
                                            <option value="분류10">분류10</option>
                                        </select>
                                    </dd>
                                    <dt>
                                        태그
                                    </dt>
                                    <dd>
                                        <label for="tag"><strong>태그</strong>를 입력해주세요. 쉼표로 구분 (예: 자기개발, 독서,.)</label>
                                        <input type="text" id="tag" class="inputText" value="">
                                    </dd>
                                    <!-- 자동완성 기능 레이어 시작 -->
                                    <div class="atcpLayer">
                                        <ul class="atcp">
                                            <li class="atcpItem">
                                                <a href="javascript:void(0);" hidefocus="true" class="atcpText">호빗</a>
                                            </li>
                                            <li class="atcpItem">
                                                <a href="javascript:void(0);" hidefocus="true" class="atcpText">호빗정장</a>
                                            </li>
                                        </ul>
                                        <div class="atcp_fn">
                                            <button type="button" class="atcp_fn_btn" data-role="none">
                                                자동완성 끄기
                                            </button>
                                            <button type="button" class="atcp_fn_btn" data-role="none">
                                                <span class="atcp_fn_x">닫기</span>
                                            </button>
                                        </div>
                                    </div>
                                    <!-- 자동완성 기능 레이어 끝 -->
                                </dl>
                            </form>
                        </div>
                    </div>
                    <div class="post_opt_Area">
                        <div class="attach_btnArea">
                            <a href="javascript:void(0);" class="btn btn_icon" data-role="none"><span class="btnText"><img class="btnImg" src="../image/icon_attach_photo.gif" alt="사진 첨부" /></span></a>
                            <a href="javascript:void(0);" class="btn btn_icon" data-role="none"><span class="btnText"><img class="btnImg" src="../image/icon_attach_video.gif" alt="동영상 첨부" /></span></a>
                        </div>
                        <div class="inputBoxArea">
                            <fieldset>
                                <legend>
                                    Share
                                </legend>
                                <input type="checkbox" name="share_fb" value="" id="share_fb" class="checkbox" data-role="none"/>
                                <label for="share_fb"><span class="checkbox_bg"></span><span class="label_txt"><img src="../image/icon_share_fb.gif" alt="페이스북 공유하기" class="label_img" /></span></label>
                                <input type="checkbox" name="share_tw" value="" id="share_tw" class="checkbox" data-role="none"/>
                                <label for="share_tw"><span class="checkbox_bg"></span><span class="label_txt"><img src="../image/icon_share_tw.gif" alt="트위터 공유하기" class="label_img" /></span></label>
                            </fieldset>
                        </div>
                    </div>
                </div>
                <div class="bottom">
                    <div class="btnArea">
                        <a href="javascript:void(0);" hidefocus="true" class="btn"><span class="btnText">취소</span></a>
                        <a href="javascript:void(0);" hidefocus="true" class="btn"><span class="btnText">확인</span></a>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>